<template>
	<view class="w-100">
		<catalogue></catalogue>
		<view class="position-relative">
			<swiper @change="swiperChange" easing-function="linear" class="swiper" circular indicator-dots
				indicator-active-color="#40C6A1" indicator-color="#DBDDDC">
		
				<swiper-item>
					<view class="swiper-one position-relative"
						:style="{'background-image': `url(${cosUrl}/bg/index_swiper1.png)`}">
						<view class="box" :class="swiperIndex == 0 ? 'box-act':'trs'">
							<view class="title">
								<view class="expert">
									互联网应用设计专家
								</view>
								<view class="technology pt-3">
									成都亚克茜科技
								</view>
							</view>
							<view class="content">
								<view>每一次设计和开发</view>
								<view>都期望你有好的体验</view>
								<view>用工匠精神程服务每一位客户</view>
							</view>
							<view @click="makePhone"
								class="d-flex service align-items-center justify-content-center position-absolute"
								style="bottom: 107px;left: 50%;transform: translateX(-50%);">
								<view class="btn d-flex  align-items-center justify-content-center" >
									<image class="img-24px " src="../../static/website/tele.svg" mode=""></image>
									<view class="pl-3 text">立即咨询 / 联系客户经理</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-two position-relative"
						:style="{'background-image': `url(${cosUrl}/bg/index_swiper2.png)`}">
						<view class="box" :class="swiperIndex == 1 ? 'box-act':'trs'">
							<view class="title">
								<view class="d-flex align-items-center">
									<text class="cicle "></text>
									<view class="pl-4">2018年公司开始运营</view>
								</view>
								<view class="d-flex align-items-center">
									<text class="cicle "></text>
									<view class="pl-4">26人技术团队</view>
								</view>
								<view class="d-flex align-items-center">
									<text class="cicle "></text>
									<view class="pl-4">500+丰富案例</view>
								</view>
							</view>
							<view class="content">
								<view>用互联网IT技术</view>
								<view>帮助企业</view>
								<view>有效提高业务的增长</view>
							</view>
							<view @tap="jumpGO('website/casePresentation')"
								class="d-flex case align-items-center justify-content-center position-absolute"
								style="bottom: 107px;left: 50%;transform: translateX(-50%);">
								<view class="btn d-flex  align-items-center justify-content-center">
									<view class="text">查看更多小程序/网站案例</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-three position-relative"
						:style="{'background-image': `url(${cosUrl}/bg/index_swiper3.png)`}">
						<view class="box" :class="swiperIndex == 2 ? 'box-act':'trs'">
							<view class="title">
								<view class="d-flex align-items-center">
									<view>成熟应用/行业解决方案</view>
								</view>
							</view>
							<view class="content">
								<view class="d-flex align-items-center">
									<text class="cicle "></text>
									<view class="pl-4">代码已经实现，上线快</view>
								</view>
								<view class="d-flex align-items-center">
									<text class="cicle "></text>
									<view class="pl-4">业务上已经成熟运营</view>
								</view>
								<view class="d-flex align-items-center">
									<text class="cicle "></text>
									<view class="pl-4">价格有竞争力</view>
								</view>
							</view>
							<view @tap="jumpGO('website/solution')"
								class="d-flex programme align-items-center justify-content-center position-absolute"
								style="bottom: 107px;left: 50%;transform: translateX(-50%);">
								<view class="btn d-flex  align-items-center justify-content-center">
									<view class="text">更多行业解决方案</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		
		</view>
		<view class="about">
			<view class="title d-flex justify-content-center">
				<text>我们擅长</text>
				<view class="point">什么</view>
			</view>
			<view class="about-en">
				BE GOOD AT
			</view>
			<view class="descript">
				专业的互联网应用软件开发商, 擅长小程序定制, 网站定制开发
			</view>
		
			<view class="bg-white position-relative">
		
				<view class="content">
					<view class="content-head">
						<image src="@/static/website/h5.png" mode=""></image>
						<view class="title-zh">网站定制开发</view>
						<view class="title-en">WEB CUSTOM DEVELOPMENT</view>
					</view>
					<view class="content-body">
						网站定制开发，为您的业务打造独一无二的在线体验！我们专注于个性化解决方案，确保网站与众不同，提升品牌独特性，让您的想法得以实现，助力业务腾飞！
					</view>
				</view>
				<view class="content">
					<view class="content-head">
						<image src="@/static/website/app.png" mode=""></image>
						<view class="title-zh">成熟应用（快速上线，低成本）</view>
						<view class="title-en">INDUSTRY SOLUTION</view>
					</view>
					<view class="content-body">
						<view class="">
							我们在多个行业和领域已经有很好的解决方案，他们有如下好处和优势：
						</view>
						<view class="" style="text-align: left;padding-top: 27px;">
							<view>
								1. 代码已经实现，可以更快速的上线产品
							</view>
							<view class="pt-2">
								2. 成熟的运营经验，定期升级维护
							</view>
							<view class="pt-2">
								3. 产品的价格更有竞争力
							</view>
						</view>
					</view>
				</view>
				<view class="content" style="padding-bottom: 32px;">
					<view class="content-head">
						<image src="@/static/website/miniapp.png" mode=""></image>
						<view class="title-zh">小程序定制开发</view>
						<view class="title-en">MINIAPP CUSTOM DEVELOPMENT</view>
					</view>
					<view class="content-body">
						微信小程序定制开发专注为企业打造独特、高效的小程序。通过个性设计和功能定制，提升品牌辨识度，创造优质用户体验，为企业量身定制微信小程序，满足特定业务需求
					</view>
				</view>
			</view>
		</view>
		<view class="industry">
			<view class="title d-flex justify-content-center">
				<text>行业成熟应用/</text>
				<view class="point">解决方案</view>
			</view>
			<view class="about-en">
				APPLICATION / SOLUTION
			</view>
			<view class="list " v-for="v,i in recommend_products" :key="i">
				<view class="bg-white brs-8 position-relative" @tap="jumpGO(`website/solutionDetail?id=${v.id}`)">
					<image src="@/static/website/remen_bg.png" mode="" class="remen"></image>
					<image :src="v.coverimage" mode="" class="coverimage" style=""></image>
					<view class="item">
						<view class="title">{{v.name}}</view>
						<view class="date_price">
							<view class="date">
								更新于{{ v.updatedate | formatDate }}
							</view>
							<view class="price">
								￥{{ v.price | formatCurrency}}元
							</view>
						</view>
						<view class="summary">
							{{ v.summary }}
						</view>
					</view>
				</view>
			</view>
			<view class="more" @tap="jumpGO('website/solution')">
				<image src="@/static/website/more.png"></image>
				<text>更多成熟应用</text>
			</view>
		</view>
		
		<view class="share" v-if="shares.length">
			<view class="title d-flex justify-content-center">
				<view>软件运营开发</view>
				<text>分享</text>
			</view>
			<view class="about-en">
				DEVELOPMENT SHARING
			</view>
			<view class="w-100 d-flex flex-wrap justify-content-between" :class="i?'py-3':''" style="padding: 0 12px;">
				<view v-for="v,i in shares" :key="i" class="item-container" @tap="jumpBlogDetail(v)">
					<view class="video_type" v-if="1 == v.sharetype.id">
						<image src="@/static/website/play.png" class="play"></image>
						<image :src="v.coverimage" mode="aspectFit" class="cover"></image>
					</view>
					<view class="article_type" v-if="2 == v.sharetype.id">
						<image :src="v.coverimage" mode="aspectFill" style="height: 275rpx;"></image>
						<view class="title">{{ v.name | substring(17)}}</view>
						<view class="updatetime">更新于{{ v.updatedate * 1000 | formatDate}}</view>
					</view>
				</view>
			</view>
			<view class="more" @tap="jumpGO('website/share')">
				<image src="@/static/website/more.png"></image>
				<text>更多视频和文章</text>
			</view>
		</view>
		<view class="design">
			<view class="title d-flex justify-content-center">
				<text>我们的</text>
				<view class="">设计案例</view>
			</view>
			<view class="about-en">
				OUR DESIGN
			</view>
			<view class="list " v-for="v,i in examples" :key="i">
				<view class="bg-white brs-8 pb-1 position-relative" @tap="jumpGO(`website/casePresentationDetail?id=${v.id}`)">
					<image :src="1 == v.type.id ? '../../static/website/case_h5.png' : '../../static/website/case_miniapp.png'" class="case_flag"></image>
					<image :src="v.coverimage" mode="" style="height: 528rpx;"></image>
					<view class="title">{{v.name}}</view>
					<view class="type d-flex">
						<view class="">
							类型-{{v.type.type_name}}
						</view>
						<view class="">
							行业-{{v.industry.industry_name}}
						</view>
					</view>
				</view>
			</view>
			<view style="padding: 0 24rpx;">
				<view class="more">
					<view class="d-flex title justify-content-center align-items-center"
						@tap="jumpGO('website/casePresentation')">
						<image src="../../static/website/more.svg" mode=""></image>
						<view class="text">更多案例</view>
					</view>
					<view class="row row-cols-3 mx-0">
						<view class=" px-1 kind" v-for="v,i in anliList" :key="i" @click="gotoExamplelistPage(v)">
							{{v.name}}({{v.count}})
						</view>
						<view class=" px-1 kind" @click="jumpGO('website/casePresentation')">
							更多行业…
						</view>
		
					</view>
				</view>
			</view>
		</view>
		<view class="evaluate">
			<view class="title d-flex justify-content-center">
				<view>来自我们</view>
				<text>客户</text>
				<view class="">的评价</view>
			</view>
			<view class="about-en">
				TESTIMONIALS
			</view>
			<view class="scroll">
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view class="card" v-for="v,i in testimonials" :key="i">
						<view class="d-flex img justify-content-center">
							<image :src="v.avatarimage" mode="aspectFill"></image>
						</view>
						<view class="text-center title pt-2">
							{{v.name}}
						</view>
						<view class="positon pt-1">
							{{v.position}}
						</view>
						<view class="company pb-2">
							{{v.company_name}}
						</view>
						<view class="des text-center">
							{{v.comment | substring(80)}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		
		
		<Footer></Footer>
		<view class="gotop" @click="goTop" v-show="scrollNum>300">
			<image src="@/static/website/back.png" style="width: 140rpx;height: 140rpx;" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {
		http_homepage,
	} from '@/common/api.js';
	export default {
		data() {
			return {
				contact_phone: '18684030581',
				recommend_products: [],
				examples: [],
				anliList: [],
				testimonials: [],
				shares: [],
				swiperIndex: 0,
				status: false,
			}
		},
		onTabItemTap(e) {
			// tab 点击时执行，此处直接接收单击事件
			console.log(e)
		},
		onLoad() {
			http_homepage()
				.then((res) => {
					console.log(res);
					if (1 == res.code) {
						this.recommend_products = res.data.recommend_products
						this.contact_phone = res.data.contact_phone
						this.examples = res.data.examples
						this.testimonials = res.data.testimonials
						this.shares = res.data.shares
						this.anliList = [...res.data.soft_types, ...res.data.industry_types]
						// var plugin = requirePlugin("wxacommentplugin");
						// plugin.openComment({
						//   // wx_pay_id: '4200001729202306024807578', // 交易评价类账号选填
						//   success: (res)=>{
						//     console.log('plugin.openComment success', res)
						//   },
						//   fail: (res) =>{
						//     console.log('plugin.openComment fail', res)
						//   }
						// })

					}
				})
		},
		methods: {
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			swiperChange(e) {
				this.swiperIndex = e.detail.current
			},
			makePhone(){
				uni.makePhoneCall({
					phoneNumber: this.contact_phone
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import './index.scss';
</style>
